<template>
	<view class="list-wp">
		<u-alert :title="infoText" type="primary" fontSize="24rpx" closable></u-alert>
		<!-- 列表信息 -->
		<view v-if="list && list.length>0">
			<view class="item" v-for="(item,index) in list" :key="item.id">
				<view class="title">
					模板{{index+1}}
				</view>
				<view class="list-card-style-wp" @click="handleItem(item,index)">
					<default-card :userInfo="item" v-if="item.style=='0'"></default-card>
					<card-style1 :userInfo="item" v-else-if="item.style=='1'"></card-style1>
					<card-style2 :userInfo="item" v-else-if="item.style=='2'"> </card-style2>
					<card-style4 :userInfo="item" v-else-if="item.style=='3'"> </card-style4>
					<card-style5 :userInfo="item" v-else-if="item.style=='4'"> </card-style5>
					<default-card :userInfo="item" bgStyle="2" v-else-if="item.style=='5'"></default-card>
					<card-style6 :userInfo="item" v-else-if="item.style=='6'"> </card-style6>
					<default-card :userInfo="item" bgStyle="3" v-else-if="item.style=='7'"></default-card>
					<!-- 默认名片 -->
					<default-card :userInfo="item" v-else></default-card>

				</view>
			</view>
		</view>
		<view class="no-data" v-else>
			<img src="https://file.casugn.com/storecompcard/temp/空页面@2x(11)_1681113828976.png" alt="">
			<view class="no-data-text">
				暂无名片模板
			</view>
		</view>
		<bottom-button @handleClick="addClick" title="添加新模板">
			<u-icon name="plus" color="#fff" size="30"></u-icon>
		</bottom-button>
		<u-action-sheet :closeOnClickOverlay="true" :closeOnClickAction="true" :actions="actionList" cancelText="取消"
			@close="closed" @select="selectClick" :show="show"></u-action-sheet>
	</view>
</template>

<script>
	import cardStyle1 from '@/components/cardStyle/cardStyle1.vue'
	import cardStyle2 from '@/components/cardStyle/cardStyle2.vue'
	import cardStyle4 from '@/components/cardStyle/cardStyle4.vue'
	import cardStyle5 from '@/components/cardStyle/cardStyle5.vue'
	import cardStyle6 from '@/components/cardStyle/cardStyle6.vue'
	import defaultCard from '@/components/cardStyle/defaultCard.vue'
	import bottomButton from '@/components/bottom-button/bottom-button.vue'
	import {
		mapState
	} from 'vuex'
	export default {
		components: {
			cardStyle1,
			cardStyle2,
			cardStyle4,
			cardStyle5,
			cardStyle6,
			defaultCard,
			bottomButton
		},
		data() {
			return {
				list: [],
				show: false,
				pageNo: 1,
				pageSize: 10,
				total: 0,
				itemInfo: {},
				infoText: '点击名片模板可分享给微信好友，帮助好友快速创建名片',
				actionList: [{
						name: '分享',
						openType: 'share'
					},
					{
						name: '编辑',
					},
					{
						name: '删除',
						color: '#F53F3F'
					}
				]
			};
		},
		onReachBottom() {
			if (this.pageNo * this.pageSize < this.total) {
				this.pageNo++
				this.getList()
			}
		},
		onLoad() {
			uni.hideShareMenu()
		},
		onShow() {
			this.getList('reset')
		},
		onPullDownRefresh() {
			this.getList('reset')
		},
		computed: {
			...mapState(['userInfo']),
		},
		methods: {
			handleItem(item, index) {
				this.itemInfo = item
				console.log(this.itemInfo, 'this.itemInfo');
				this.show = true
			},
			closed() {
				this.show = false
			},
			selectClick({
				name
			}) {
				switch (name) {
					case '分享':
						uni.showLoading({

						})
						break;
					case '编辑':
						uni.navigateTo({
							url: '/pagesBusiness/cardTemplate/editCardTemplate?id=' + this.itemInfo.id
						})
						break;
					case '删除':
						let that = this
						uni.showModal({
							title: '是否确定删除?',
							success: (res) => {
								if (res.confirm) {
									uni.showLoading({})
									that.$api.delCardTemplateById(
										that.itemInfo.id
									).then(res => {
										if (res.success) {
											uni.showToast({
												title: '已删除',
												icon: 'none'
											})
											that.getList('reset')
										}
									}).catch(err => {
										uni.showToast({
											title: '删除失败',
											icon: 'none'
										})
									})
									uni.hideLoading()

								} else if (res.cancel) {
									console.log('用户点击取消');
								}
							}
						});
						break;



				}
				this.closed()
			},
			async getList(type) {
				uni.showLoading({

				})
				if (type == 'reset') {
					this.pageNo = 1
					this.total = 0
					this.list = []
				}
				let payload = {
					pageNo: this.pageNo,
					pageSize: this.pageSize,
					openId: this.userInfo.openId
				}
				let res = await this.$api.cardTemplateList(payload)
				if (res.success && res.result.records) {
					if (type == 'reset') {
						this.list = res.result.records
					} else {
						this.list = [...this.list, ...res.result.records]
					}
					this.total = res.result.total
				} else {
					uni.showToast({
						title: res.message,
						icon: 'none'
					})
				}
				uni.hideLoading()
				uni.stopPullDownRefresh()
			},
			addClick() {
				if (!this.userInfo.id) {
					return this.$showToast('请先创建名片')
				}
				uni.navigateTo({
					url: '/pagesBusiness/cardTemplate/createCardTemplate'
				})
			},
			delItem(item, index) {

			},
			editItem(item, index) {
				uni.navigateTo({
					url: '/pagesBusiness/cardTemplate/editCardTemplate?id' + item.id
				})
			},
			shareItem(item, index) {

			}

		},
		onShareAppMessage({
			from
		}) {
			if (from === 'button') {
				const promise = new Promise(resolve => {
					this.$api.shareCardTemplate(
						this.itemInfo.id
					).then(res => {
						if (res.success && res.result.id) {
							console.log(res.result, 'shareCardTemplate-res.success');
							resolve({
								title: '创建名片',
								path: `/pagesCard/createCard/createCardByOtherTemplate?templateShareId=${res
									.result.id}`,
								imageUrl: 'https://file.casugn.com/storecompcard/temp/Snipaste_2023-05-12_11-53-27_1683863661939.png',

							})
						}
					})
				})
				return {
					title: '我的拜帖',
					path: '',
					promise
				}
			}

		}
	}
</script>

<style lang="scss" scoped>
	.list-wp {
		padding-bottom: calc(100rpx + constant(safe-area-inset-bottom));
		padding-bottom: calc(100rpx + env(safe-area-inset-bottom));

		.item {
			margin-bottom: 30rpx;
			background-color: #F7F8FA;
			padding-bottom: 30rpx;

			.title {
				margin-left: 24rpx;
				padding-top: 24rpx;
				font-size: 26rpx;
				font-weight: 600;
				color: #000000;
			}

			.list-card-style-wp {
				transform: scale(0.8, 0.8);
			}
		}


		.option-btn-wp {
			overflow: auto;
			border-top: 1rpx solid #eee;
			margin: 24rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.btn-wp {
				line-height: 70rpx;
				color: #276AEE;
				height: 70rpx;
				flex: 1;
				text-align: center;
				font-size: 28rpx;
				font-weight: 400;


			}
		}


		.no-data {
			height: 296rpx;
			margin: 0 auto;
			margin-top: 240rpx;
			text-align: center;

			img {
				width: 240rpx;
				height: 240rpx;
			}

			.no-data-text {
				font-size: 28rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #86909C;
				line-height: 39rpx;
				margin-top: 16rpx;
			}

		}

	}

	.btnWp {
		width: 100%;
		height: 88rpx;
		position: fixed;
		bottom: 20rpx;
		left: 0;
		border: none;

		.btn {
			height: 100%;
			margin: 0 48rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			background-color: $u-primary;

			.text {
				margin-left: 20upx;
				font-size: 30upx;
				font-weight: 400;
				width: 150rpx;
				height: 42rpx;
				font-size: 30rpx;
				color: #FFFFFF;
				line-height: 42rpx;
			}
		}
	}
</style>